<template>
	<!-- 我的等级 -->
	<view>
		<view class="bgi"> <image src="/static/images/bg01.png" mode=""></image> </view>
		<view class="member-center">
			<!-- #ifdef MP -->
			<NavBar titleText="赠送会员" :iconColor="iconColor" :textColor="iconColor"  :isScrolling="scrollY>10 ? true : false" showBack></NavBar>
			<!-- #endif -->
		</view>	
		<view class="user_vip_gift" v-if="info">
			<view class="user_gift_left">
				<view class="user_gift_money">{{info.card_money}}</view>
				<view class="user_gift_all">总余额</view>
			</view>
			<view class="user_gift_left">
				<view class="user_gift_btn" @click="withdraw">提现</view>
			</view>
		</view>
		<view class="user_vip_middle" v-if="info">
			<view class="user_vip_middle_top">
				<view class="user_vip_middle_left">
					<image :src="imgHost+'/static/images/img_jktyg@2x.png'" mode=""></image>
				</view>
				<view class="user_vip_middle_right">
					<view class="user_vip_middle_title">
						299元健康体验官会员
					</view>
					<view class="user_gift_text">可赠送：{{giftable_num}}</view>
					<view class="user_gift_text">已领取：{{claim_num}}</view>
					<view class="user_gift_text">已激活：{{activate_num}}</view>
				</view>
			</view>
			<view class="user_vip_middle_bottom">
				<button open-type="share" class="user_vip_middle_btn" v-if="info.collection_type == 1 && giftable_num>0">去赠送</button>
				<view class="user_vip_middle_btn no" @click="noFun(1)" v-if="info.collection_type == 1 && giftable_num==0">去赠送</view>
				<view class="user_vip_middle_btn no" @click="noFun(2)" v-if="info.collection_type != 1">去赠送</view>
			</view>
		</view>
		<view class="user_vip_down">
			<view class="user_vip_down_tit">激活记录</view>
			<view class="user_vip_list" v-if="list.length>0">
				<view class="user_vip_li" v-for="(item,index) in list" :key="index">
					<view class="user_vip_li_left">
						<view class="">{{item.user.nickname}}-299元健康体验官会员</view>
						<view class="">{{item.pay_time}}</view>
					</view>
					<view class="user_vip_li_right">
						+299.00元
					</view>
				</view>
			</view>
			<view class="zanwu" v-else>
				暂无数据
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="vip_gift_mask" v-if="giftShow">
			<view class="vip_gift_contet">
				<view class="vip_gift_box">
					<image class="vip_gift_bimg" :src="imgHost+'/static/images/img_jktyg@2x.png'" mode=""></image>
					<view class="vip_gift_title">健康体验官会员卡</view>
					<view class="vip_gift_group">
						<view class="vip_gift_content">
							<view class="vip_gift_conl">兑换码：1020sasdassd</view>
							<view class="vip_gift_conr">
								<image src="/static/images/copy@2x.png" mode=""></image>
								<view class="">复制</view>
							</view>
						</view>
						<view class="vip_gift_content">
							<view class="vip_gift_conl">卡密：1020sasdassd</view>
							<view class="vip_gift_conr">
								<image src="/static/images/copy@2x.png" mode=""></image>
								<view class="">复制</view>
							</view>
						</view>
					</view>
					<view class="vip_gift_go">去赠送</view>
				</view>
				<view class="vip_gift_close" @click="closeFun()">
					<image src="/static/images/close.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberCardMyList,
		memberCardInfo
	} from '@/api/user.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import NavBar from '@/components/NavBar';
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				info:{},
				tabindex:1,
				// #ifdef MP
				iconColor: '#000000',
				isScrolling: true,
				// #endif
				list:[],
				scrollY: 0, //页面滚动高度
				giftShow:false,
				giftable_num:0,
				claim_num:0,
				activate_num:0,
				
				cardInfo:{},
				
				imgHost:HTTP_REQUEST_URL,
			};
		},
		
		onLoad() {
			this.infoFun()
			this.getlevelList()
		},
		onShow() {
			
		},
		onPageScroll(e) {
			this.scrollY = e.scrollTop;
		},
		//#ifdef MP
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(e) {
			console.log(e)
			let that = this
			if(e.from == 'button'){
				let share = {
					title: '299元健康体验官会员',
					path: '/pages/users/user_vip_gift/get?id=' + that.cardInfo.id,
					imageUrl: that.imgHost + '/static/images/img_jktyg@2x.png'
				};
				return share;
			}
		},
		//#endif
		methods: {
			infoFun(){
				let that = this;
				memberCardInfo().then(res => {
					that.cardInfo = res.data.info
				});
			},
			noFun(e){
				uni.showToast({
					title: e==2?'此卡不可线上赠送':'没有可赠送次数',
					icon:'none'
				})
			},
			getlevelList: function() {
				if (this.loadend) return false;
				if (this.loading) return false;
				memberCardMyList().then(res => {
					this.info = res.data.userInfo;
					this.giftable_num = res.data.giftable_num;
					this.claim_num = res.data.claim_num;
					this.activate_num = res.data.activate_num;
					let list = res.data.my_branch;
					console.log("会员卡列表",res.data)
					this.list = [...this.list, ...list];
					let expData = [...this.list];
					let expList = [];
					for (let i = 0; i < expData.length; i++) {
						expList.push({
							time: expData[i].time,
							list: [expData[i]],
						});
						for (let j = i + 1; j < expData.length; j++) {
							if (expData[i].time == expData[j].time) {
								expList[expList.length - 1].list.push(expData[j]);
								expData.splice(j, 1);
								j--;
							}
						}
					}
					this.expList = expList;
					this.loadend = list.length < this.limit;;
					this.loadTitle = this.loadend ? '没有更多了～' : '加载更多';
					this.page = this.page + 1;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多';
				});
			},
			withdraw(){
				uni.navigateTo({
					url:'/pages/users/user_cash/index?type='+2
				})
			}
		},
		onReachBottom() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.zanwu{
		width: 100%;
		height: auto;
		line-height: 100rpx;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.4);
		text-align: center;
	}
	.bgi{
		width: 100%;
		height: 630rpx;
		position: absolute;
		top:0;
		left: 0;
		z-index: -1;
	}
	.bgi image{
		width: 100%;
		height: 100%;
	}
	.user_vip_gift{
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user_gift_left{
		height: auto;
		overflow: hidden;
	}
	.user_gift_money{
		font-size: 44rpx;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 62rpx;
		color: rgba(157, 86, 10, 1);
	}
	.user_gift_all{
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(157, 86, 10, 1);
	}
	.user_gift_btn{
		width: 160rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background: linear-gradient(90deg, rgba(209, 150, 59, 1) 0%, rgba(224, 173, 83, 1) 100%);
		font-size: 28rpx;
		font-weight: 400;
		line-height:60rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
	.user_vip_middle{
		width: 690rpx;
		height: 290rpx;
		border-radius: 20rpx;
		margin: 26rpx auto 0;
		background-image: url('/static/images/p_bg@2x.png');
		background-size:100% 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	.user_vip_middle_top{
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 26rpx 34rpx 18rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user_vip_middle_left{
		width: 150rpx;
		height: 120rpx;
	}
	.user_vip_middle_left image{
		width: 100%;
		height: 100%;
	}
	.user_vip_middle_right{
		width: 72%;
		height: auto;
		overflow: hidden;
	}
	.user_vip_middle_title{
		font-size: 32rpx;
		font-weight: 700;
		line-height: 46rpx;
		color: rgba(51, 47, 61, 1);
	}
	.user_gift_text{
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(51, 47, 61, 1);
	}
	.user_vip_middle_bottom{
		width: 100%;
		height: 96rpx;
		overflow: hidden;
	}
	.user_vip_middle_btn{
		width: 170rpx;
		height: 48rpx;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(209, 150, 59, 1) 0%, rgba(224, 173, 83, 1) 100%);
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin: 24rpx auto 0;
	}
	.no{
		background: #999;
	}
	.user_vip_down{
		margin-top: 52rpx;
		width: 100%;
		height: auto;
	}
	.user_vip_down_tit{
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: rgba(44, 44, 59, 1);
		text-align: left;
		width: 100%;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.user_vip_list{
		width: 100%;
		height: auto;
		border-radius: 30rpx 30rpx 0px 0px;
		background: rgba(255, 255, 255, 1);
		margin-top: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}
	.user_vip_li{
		width: 100%;
		height: auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user_vip_li_left{
		width: 80%;
		height: auto;
		overflow: hidden;
	}
	.user_vip_li_left view:nth-child(1){
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(51, 51, 51, 1);
	}
	.user_vip_li_left view:nth-child(2){
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(153, 153, 153, 1);
		margin-top: 8rpx;
	}
	.user_vip_li_right{
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(157, 86, 10, 1);
	}
	.vip_gift_mask{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.vip_gift_contet{
		width: 630rpx;
		height: auto;
		overflow: hidden;
	}
	.vip_gift_box{
		width: 630rpx;
		height: 720rpx;
		border-radius: 30rpx;
		background: linear-gradient(133.13deg, rgba(245, 240, 235, 1) 0%, rgba(248, 238, 219, 1) 50.69%, rgba(251, 224, 220, 1) 81.94%), rgba(255, 255, 255, 1);
		padding: 66rpx 30rpx;
		box-sizing: border-box;
	}
	.vip_gift_close{
		width: 64rpx;
		height: 64rpx;
		display: block;
		margin: 50rpx auto 0;
	}
	.vip_gift_close image{
		width: 100%;
		height: 100%;
	}
	.vip_gift_bimg{
		width: 336rpx;
		height: 250rpx;
		margin: auto;
		display: block;
	}
	.vip_gift_title{
		width: 100%;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 52rpx;
		color: rgba(51, 47, 61, 1);
		text-align: center;
		margin-top: 26rpx;
	}
	.vip_gift_group{
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.vip_gift_content{
		width: 100%;
		display: flex;
		justify-content:center;
		align-items: center;
	}
	.vip_gift_conl{
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(209, 149, 59, 1);
		margin-right: 10rpx;
		width: 300rpx;
	}
	.vip_gift_conr{
		display: flex;
	}
	.vip_gift_conr image{
		width: 28rpx;
		height: 28rpx;
	}
	.vip_gift_conr view{
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(209, 149, 59, 1);
	}
	.vip_gift_go{
		margin: 44rpx auto 0;
		width: 570rpx;
		height: 80rpx;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(209, 150, 59, 1) 0%, rgba(224, 173, 83, 1) 100%);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 80rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>